<template>
	<view class="container">
		<topBar>实名认证</topBar>
		<view class="content">
			<view class="head">
				<view class="title">
					请进行人脸识别以核验身份
				</view>
				<view class="tip">
					请核对登录信息是否一致，并将正脸对准框内，保证光线充足
				</view>
			</view>
			<view class="avatar-box">
				<image class="img" src="/static/img/my/face.png"></image>
			</view>
			<view class="user-info">
				当前登录用户：<text class="user">{{userInfo.phone}}</text>
			</view>
			<view class="tip-items">
				<view class="tip-box">
					<image class="icon" src="/static/img/my/tip-icon1.png"></image>
					<view class="name">
						避免遮挡
					</view>
				</view>
				<view class="tip-box">
					<image class="icon" src="/static/img/my/tip-icon2.png"></image>
					<view class="name">
						光线充足
					</view>
				</view>
				<view class="tip-box">
					<image class="icon" src="/static/img/my/tip-icon3.png"></image>
					<view class="name">
						正对手机
					</view>
				</view>
			</view>
			<view class="bottom-content">
				<view class="tip-message">
					<image class="tip-icon" src="/static/img/my/tip.png"></image>
					<text>人脸识别信息将上传至数据库，必要时公安机关可依法调证</text>
				</view>
				<Button3 class="btn">开始验证</Button3>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import Button3 from '@/components/button3/button3.vue';
	import { useUserStore } from '@/stroes';
	const userStore = useUserStore()
	const userInfo = userStore.userInfo;
</script>

<style scoped lang="scss">
	.content {
		// position: relative;
		padding: 56rpx 32rpx 68rpx;
	}

	.head {
		text-align: center;

		.title {
			font-size: 40rpx;
			font-weight: bold;
			color: #000;
		}

		.tip {
			margin: 26rpx 0rpx 58rpx;
			padding: 24rpx 12rpx;
			font-size: 24rpx;
			color: #39B791;
			border-radius: 8rpx;
			background-color: rgba(57, 183, 145, 0.1);
		}
	}

	.avatar-box {
		display: flex;
		justify-content: center;
		align-items: center;

		.img {
			margin: 0rpx auto;
			width: 332rpx;
			height: 332rpx;
			border-radius: 50%;
		}
	}

	.user-info {
		margin: 48rpx 0rpx 90rpx;
		font-size: 28rpx;
		color: #000;
		text-align: center;

		.user {
			color: $primary-color;
		}
	}

	.tip-items {
		display: flex;
		justify-content: space-evenly;
		align-items: center;

		.tip-box {
			width: 108rpx;
			font-size: 24rpx;
			text-align: center;
			color: #989DA5;

			.icon {
				margin-bottom: 16rpx;
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				// background-color: #D9D9D9;
			}
		}
	}

	.bottom-content {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0rpx 32rpx 68rpx;
		// padding-bottom: 68rpx;
		// width: 100%;

		.tip-message {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			font-size: 24rpx;
			color: #989DA5;

			.tip-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 12rpx;
			}
		}

		.btn {
			width: 100%;
		}
	}
</style>